<!DOCTYPE html>
<html>
<head>
<title>PLAYER!</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="./js/init.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
	<script src="./js/custom.js"></script>
</head>
<body>
	<div data-role="page" id="ranking">
		<script>
			$('#ranking').live('pagebeforeshow',function(event) {
				$.getJSON("../rest/rankings/MEN", function(data) {
					var rankingsList = $("#rankings");
					rankingsList.empty();
		    		if (data.rankings.length < 1) {
		    			rankingsList.html('No rankings found');
		    		} else {
		    			$.each(data.rankings, function(i, ranking){
							rankingsList.append(rankingToHtml(ranking));
				      	});
						rankingsList.listview('refresh');
					}
				});
			});
			
			function rankingToHtml(ranking) {
				return '<li><a href="javascript:showPlayerDetails(' + ranking.player.id + ')">' + ranking.rank + ' - ' + ranking.player.nickname + '</a></li> ';
			}
			
			function showPlayerDetails(playerId) {
				sessionStorage.selectedPlayerId = playerId;
				$.mobile.changePage("player.html");
			}
		</script>
		
		
		<div data-role="header" data-position="fixed">
			<h1>Ranking</h1>
		</div>

		<div data-role="content">
			<ul data-role="listview" id="rankings">
			</ul>
		</div>
		 
	  	<div data-role="footer" data-id="playerfooter" data-position="fixed"> 
		    <div data-role="navbar">
		    	<ul>
		    		<li><a href="#home" data-icon="home">Home</a></li>
		    		<li><a href="gameactions.html" data-icon="gear">Games</a></li>
		    		<li><a href="rankings.html" data-icon="gear" class="ui-btn-active ui-state-persist">Ranks</a></li>
		    	</ul>
		    </div>  
	  </div>
	  
	</div>
	
</body>
</html>